<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .clearFloat:after{
            content: "";
            display: block;
            clear:both;
            line-height: 0;
            height:0;
            visibility:hidden;
        }
        #box{
            width: 520px;
            height: 280px;
            margin:0 auto;
            position: relative;
        }
        #box p{
            font-size: 60px;
            font-family: "宋体";
            color: #fff;
            width: 40px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            display:none;
            background: rgba(0,0,0,0.5);
            position:absolute;
            top: 100px;
        }
        #left{
            left:0;
        }
        #right{
            right:0;
        }
        #box:hover #left{
            display:block;
        } 
        #box:hover #right{
            display:block;
        }
        #left:hover{
            background:rgba(0,0,0,0.7);
        }
        #right:hover{
            background:rgba(0,0,0,0.7);
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/1.jpg" alt="" id="pic">
        <p id="left"><</p>
        <p id="right">></p>
    </div>
    

    <script>
        var box = document.getElementById('box');
        var pic = document.getElementById('pic');
        var left = document.getElementById('left');
        var right = document.getElementById('right');
        
        var arr = new Array(5);
        for(var i=0;i<arr.length;i++){
            arr[i]="img/"+(i+1)+".jpg";
        }
        console.log(arr);
        var n = 0;
        function fn(){
        n++;
        if(n>arr.length-1){
            n=0;
        }
        pic.src = arr[n];
    }
    var str = setInterval(fn,1000);
    box.onmouseover = function(){
        clearInterval(str);
    }
    box.onmouseout = function(){
        str = setInterval(fn,1000);
    }
    right.onclick = function(){
        fn();
    }
    left.onclick = function(){
        n--;
        if(n<0){
            n=arr.length-1;
        }
        pic.src=arr[n];
    }
    </script>
</body>
</html>